import 'package:flutter/material.dart';
import 'package:fsharing/core/viewmodels/pages/mine/reg_password_reset_model.dart';
import 'package:fsharing/core/viewmodels/pages/mine/req_code_model.dart';
import 'package:fsharing/core/viewmodels/view_model.dart';
import 'package:fsharing/ui/widgets/background_container.dart';
import 'package:fsharing/ui/widgets/count_down_text.dart';
import 'package:fsharing/ui/widgets/round_back_button.dart';
import 'package:oktoast/oktoast.dart';
import 'package:provider/provider.dart';

class ForgetPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => RegPasswordResetModel(Provider.of(context, listen: false)),
      child: BackgroundContainer(
        name: 'assets/images/all_background_oauth.png',
        child: Scaffold(
          appBar: AppBar(
            leading: RoundBackButton(),
            title: Text('忘记密码'),
          ),
          body: Builder(
            builder: (context) {
              RegPasswordResetModel model = Provider.of(context, listen: false);
              return SingleChildScrollView(
                padding: EdgeInsets.symmetric(horizontal: 12),
                child: Column(
                  children: <Widget>[
                    _WrapContainer(
                      margin: EdgeInsets.only(top: 15),
                      child: TextField(
                        decoration: InputDecoration(
                          hintText: '用户名',
                        ),
                        onChanged: (value) {
                          model.username = value;
                        },
                      ),
                    ),
                    _WrapContainer(
                      margin: EdgeInsets.only(top: 15),
                      child: TextField(
                        decoration: InputDecoration(
                          hintText: '手机号',
                        ),
                        onChanged: (value) {
                          model.mobile = value;
                        },
                      ),
                    ),
                    SizedBox(height: 15),
                    Row(
                      children: <Widget>[
                        Expanded(
                          child: Container(
                            child: _WrapContainer(
                              child: TextField(
                                decoration: InputDecoration(
                                  hintText: '验证码',
                                ),
                                onChanged: (value) {
                                  model.checkCode = value;
                                },
                              ),
                            ),
                          ),
                        ),
                        SizedBox(width: 1),
                        Container(
                          alignment: Alignment.center,
                          color: Colors.white10,
                          width: 118,
                          height: 50,
                          child: ChangeNotifierProvider(
                            create: (context) => ReqCodeModel(Provider.of(context, listen: false)),
                            child: Consumer<ReqCodeModel>(
                              builder: (context, model, child) {
                                switch (model.viewState) {
                                  case ViewState.busy:
                                    return FlatButton(
                                      onPressed: null,
                                      child: SizedBox(
                                        width: 14,
                                        height: 14,
                                        child: CircularProgressIndicator(),
                                      ),
                                    );
                                  case ViewState.success:
                                    return FlatButton(
                                      onPressed: null,
                                      child: CountDownText(
                                        function: () {
                                          model.viewState = ViewState.idle;
                                        },
                                        style: TextStyle(color: Colors.grey, fontSize: 16),
                                      ),
                                    );
                                  default:
                                    return FlatButton(
                                      onPressed: () {
                                        _onCodeClicked(context);
                                      },
                                      child: Text(
                                        '发送验证码',
                                        style: TextStyle(color: Colors.grey, fontSize: 16),
                                      ),
                                    );
                                }
                              },
                            ),
                          ),
                        ),
                      ],
                    ),
                    _WrapContainer(
                      margin: EdgeInsets.only(top: 15),
                      child: TextField(
                        decoration: InputDecoration(
                          hintText: '密码',
                        ),
                        obscureText: true,
                        onChanged: (value) {
                          model.password = value;
                        },
                      ),
                    ),
                    _WrapContainer(
                      margin: EdgeInsets.only(top: 15),
                      child: TextField(
                        decoration: InputDecoration(
                          hintText: '确认密码',
                        ),
                        obscureText: true,
                        onChanged: (value) {
                          model.passwordConfirm = value;
                        },
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(top: 40),
                      width: 256,
                      height: 65,
                      child: Consumer<RegPasswordResetModel>(
                        builder: (context, model, child) {
                          switch (model.viewState) {
                            case ViewState.busy:
                              return RaisedButton(
                                onPressed: null,
                                child: SizedBox(
                                  child: CircularProgressIndicator(),
                                ),
                              );
                            default:
                              return RaisedButton(
                                onPressed: () {
                                  _onResetClicked(context);
                                },
                                child: Text(
                                  '重置密码',
                                  style: TextStyle(fontSize: 18),
                                ),
                              );
                          }
                        },
                      ),
                    ),
                  ],
                ),
              );
            },
          ),
        ),
      ),
    );
  }

  void _onCodeClicked(BuildContext context) async {
    RegPasswordResetModel regPasswordResetModel = Provider.of(context, listen: false);
    var mobile = regPasswordResetModel.mobile;

    ReqCodeModel reqCodeModel = Provider.of(context, listen: false);
    var viewState = await reqCodeModel.reqCode(ReqCodeModel.RESET_PASSWORD, mobile);

    switch (viewState) {
      case ViewState.error:
        showToast(reqCodeModel.errorMessage);
        break;
      default:
        showToast('验证码已发送');
        break;
    }
  }

  void _onResetClicked(BuildContext context) async {
    RegPasswordResetModel model = Provider.of(context, listen: false);
    var viewState = await model.regPasswordReset();
    switch (viewState) {
      case ViewState.error:
        showToast(model.errorMessage);
        break;
      default:
        showToast('密码重置成功');
        break;
    }
  }
}

class _WrapContainer extends StatelessWidget {
  final EdgeInsetsGeometry margin;
  final Widget child;

  _WrapContainer({
    Key key,
    this.margin,
    this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      padding: EdgeInsets.symmetric(horizontal: 16),
      color: Colors.white10,
      height: 50,
      margin: margin,
      child: child,
    );
  }
}
